<template>
  <div class="menu-container">
    <RouterLink :exact="item.exact" :to="item.link" :class="{
        selected: item.selected
    }" :href="item.link" v-for="(item, i) in menu" :key="i">
      <Icon :type="item.icon" />
      <span>{{ item.title }}</span>
    </RouterLink>
  </div>
</template>

<script>
import Icon from "./Icon.vue";

export default {
  components: {
    Icon,
  },
  data() {
    return {
      menu: [
        {
          title: "首页",
          icon: "home",
          link: "/",
          exact: true
        },
        {
          title: "文章",
          icon: "blog",
          link: "/blog",
          exact: false
        },
        {
          title: "关于我",
          icon: "about",
          link: "/about",
          exact: true
        },
        {
          title: "项目&效果",
          icon: "code",
          link: "/project",
          exact: true
        },
        {
          title: "留言板",
          icon: "chat",
          link: "/message",
          exact: true
        },
      ],
    };
  },
};
</script>

<style scoped lang="less">
@import "../styles/color.less";

.menu-container {
    width: 100%;
    font-size: 18px;
    a{
        display: flex;
        padding: 10px 45px;
        color: @gray;
        &.router-link-active{
            color: #fff;
            background-color: #2d2d2d;
        }
        &:hover{
            color: #fff;
        }
        .icon-container{
            margin-right: 15px;
        }
    }
}
</style>